import React from "react";
import { Canvas } from '@react-three/fiber';
import { Box } from '@react-three/drei';
import * as THREE from 'three';
import { BufferGeometry, Float32BufferAttribute, MeshStandardMaterial } from 'three';


// 定义长方体的八个顶点
const positions = [
    -1,  1,  1, // v0
    -1, -1,  1, // v1
    1, -1,  1, // v2
    1,  1,  1, // v3
    -1,  1, -1, // v4
    -1, -1, -1, // v5
    1, -1, -1, // v6
    1,  1, -1, // v7
];

// 定义长方体的面，每个面由两个三角形组成，每个三角形由三个顶点索引定义
const indices = [
    0, 1, 2,   // front-top-left triangle
    0, 2, 3,   // front-top-right triangle
    3, 2, 6,   // front-bottom-right triangle
    3, 6, 7,   // front-bottom-left triangle
    7, 6, 5,   // back-bottom-right triangle
    7, 5, 4,   // back-bottom-left triangle
    4, 5, 1,   // back-top-left triangle
    4, 1, 0,   // back-top-right triangle
    1, 5, 6,   // right-top triangle
    1, 6, 2,   // right-bottom triangle
    0, 3, 7,   // left-top triangle
    0, 7, 4,   // left-bottom triangle
    2, 6, 5,   // bottom-top triangle
    2, 5, 1,    // bottom-bottom triangle
    4, 7, 3,   // top-top triangle
    4, 3, 0,    // top-bottom triangle
];

// 创建BufferGeometry
const geometry = new BufferGeometry();
geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));

// 创建Material
const material = new MeshStandardMaterial({ color: 'orange', flatShading: true });

function CustomBox({ ...props }) {
    // 返回mesh组件
    return (
        <mesh geometry={geometry} {...props}>
            <meshStandardMaterial attach="material" color="orange" flatShading />
        </mesh>
    );
}


const MeshDemo2: React.FC = () => {
    return (
        <Canvas>
            <ambientLight intensity={0.5} />
            <spotLight position={[10, 15, 10]} angle={0.3} />
            <pointLight position={[-10, -10, -10]} />
            <CustomBox />
        </Canvas>
    );
}

export default MeshDemo2;